$(function () {
    /*   
   6、添加分类
       1、给批量删除按钮绑定点击事件
       2、获取表单值
       3、校验表单值
       4、发送ajax请求
       5、刷新页面  
       */
    $('form').on('submit', function () {
        // var formData = $(this).serialize()
        // //console.log(formData,777);
        // $.ajax({
        //     url: '/categories',
        //     type: 'post',
        //     data: formData,
        //     success: function (response) {
        //         console.log(response, 6666);

        //     }
        // })

        /* 方法2： */
        /* 2、获取表单值 */
        var title = $('#title').val()
        var className = $('#className').val()
        /* 3、校验表单值 */
        if (title.trim().length <= 0) {
            alert("请输入标题")
            return;
        }
        if (className.trim().length <= 0) {
            alert("请输入类名")
            return;
        }
        /* 4. 发送ajax请求*/
        $.ajax({
            url: '/categories',
            type: 'post',
            data: {
                title,
                className
            },
            success: function (response) {
                //console.log(response, 6666);
                location.reload()
            }
        })
        return false;
    })

    /* 
    7、实现分类 数据展示
        1、初次进入页面就发送请求
        2、成功后使用模板引擎
            3、引入art-template
            4、准备模板
            5、渲染数据
    */
    $.ajax({
        url: '/categories',
        success: function (res) {
            console.log(res, 666);
            var html = template('tpl', { data: res })
            $('tbody').html(html)
        }
    })


    /* 编辑分类数据 */
    $('tbody').on('click', '.edit', function () {
        var title = $(this).data('title')
        var className = $(this).data('class-name')
        var id = $(this).data('id')
        console.log(className, 6677);

        //template('tpl-edit',{id,title,className})
        var html = template('tpl-edit', { id: id, title: title, className: className })
        $('#box').html(html)
    })

    /* 修改分类 */
    $("#box").on('click', "#editBtn", function () {
        var title = $('#title').val()
        var className = $('#className').val()
        var id = $(this).data('id')

        $.ajax({
            url: '/categories/' + id,
            data: {
                title,
                className
            },
            type: 'put'
        }).then(res => {
            console.log(res, 3333);
            location.reload()
        })
    })
    //$("#box").on('submit','#eForm',function(){})

    /* 删除分类 */
    $("tbody").on('click', ".del", function () {
        console.log(1111);
        
        var  id=$(this).data('id')
        
        $.ajax({
            url: '/categories/' + id,
            type: 'delete'
        }).then(res => {
            console.log(res, 3333);
            location.reload()
        })
    })
})